<template>
    <div class='Investment'>
        <navbarW :navbarIndex='2'></navbarW>
        <div class='carousel'></div>    

        <div class='investmentMain'>
            <div class='main'>
                <ul>
                    <li v-for='(item,index) in list' :key='index'>
                        <a @click='hasIndex(index)' :class="{'current':index === currentIndex}" href="javascript:;">{{item}}<i class='iconfont icon-right'></i></a>
                    </li>
                </ul>
                <div v-if='currentIndex === 0' class='mainText'>
                    <h3>风险提示</h3>
                    <div class='textBox'>
                        <b>投资有风险，理财需谨慎！</b>
                        <p>视纪影视致力于提供合理、准确、完整的资讯信息，所有信息来源于影片出品方，所以不对因信息的不合理、不准确或遗漏导致的任何损失或损害承担责任，亦不负任何法律责任。投资理财还要投资者自己决策，所以投资者也要为自己的投资决策负责，获取相应收益，承担相应风险。视纪影视致力于提供合理、准确、完整的资讯信息，所有信息来源于影片出品方，所以不对因信息的不合理、不准确或遗漏导致的任何损失或损害承担责任，亦不负任何法律责任。投资理财还要投资者自己决策，所以投资者也要为自己的投资决策负责，获取相应收益，承担相应风险。</p>
                    </div>
                </div>
                <div v-if='currentIndex === 1' class='mainText'>
                    <h3>购买流程</h3>
                    <div class='textBox'>
                        <b>购买流程</b>
                        
                    </div>
                </div>
                <div v-if='currentIndex === 2' class='mainText'>
                    <h3>常见问题</h3>
                    <div class='textBox'>
                        <b>常见问题</b>
                    </div>
                </div>

            </div>
        </div>



        <fillInformation></fillInformation>
        <footerBottom></footerBottom>
    </div>
</template>


<script>
import navbarW from './components/navbarW';
import fillInformation from './components/fillInformation';
import footerBottom from './components/footer';
export default {
    name:'Investment',
    data(){
        return {
            currentIndex:0,
            list:['风险提示','购买流程','常见问题']
        }
    },
    methods:{
        hasIndex(index){
            this.currentIndex = index;
        }
    },
    components:{
        navbarW,
        fillInformation,
        footerBottom
    }
}
</script>

<style lang="less" scoped>
.Investment{
    .carousel{
        padding-top: 2rem;
        width: 100%;
        height: 550px;
        background: url('../../assets/image/guide.jpg') center center no-repeat;
        background-size: cover;
    }
    .investmentMain{
        background: #fff;
        padding: 3rem 0 7rem 0;
        .main{
            display: flex;
            width: 1000px;
            margin: 0 auto;
            justify-content: space-between;
            ul{

                width: 315px;
                li{
                    a{
                        display: inline-block;
                        padding: 1rem;
                        text-align: left;
                        width: 100%;
                        color: rgba(21, 21, 21, 1);
                        border: 1px solid rgba(187, 187, 187, 1);
                        position: relative;
                        .iconfont{
                            position: absolute;
                            right: .5rem;
                            top: 1rem;
                        }
                    }
                    
                }
                li:nth-child(2){
                    a{
                        border-top: none;
                        border-bottom: none;
                    }
                }
                .current{
                    background: #ff1268;
                    color: #fff;
                    border: 1px solid transparent;
                    .iconfont{
                        color: #fff;
                    }
                }
            }
            .mainText{
                width: 60%;
                h3{
                    font-weight: 400;
                    margin: 0 0 30px 0;
                    color: #ff1268;
                    font-size: 20px;
                    padding: .8rem 0;
                    border-bottom: 1px solid #ff1268;
                    text-align: left;
                }
                b,p{
                    font-size: 16px;
                }
                p{
                    line-height: 1.8rem;
                }
            }
        }
    }

}
</style>
